<template>
  <view>
    <!-- 底层背景颜色 -->
    <view class="bg-color" />
    <!-- 搜索框 -->
    <view class="search-bar">
      <uni-search-bar
        class="uni-mt-10"
        radius="20"
        bgColor="#fff"
        placeholder="自动显示隐藏"
        clearButton="auto"
        cancelButton="none"
        @confirm="search()"
        v-model="listQuery.propertyTitle"
      >
        <!-- 自定义搜索icon -->
        <template v-slot:searchIcon>
          <img class="search-icon" src="/static/img/search.png" />
        </template>
      </uni-search-bar>
    </view>
    <!-- 标签区域 -->
    <view class="tag-body">
      <view class="tag-view" v-for="(item, index) in tagContent" :key="index">
        <uni-tag
          circle
          :inverted="!item.selected"
          @click="changeTag(item)"
          :text="item.text"
        />
      </view>
    </view>
    <!-- 水平滚动导航栏 -->
    <view class="horizonal-tab">
      <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
        <block v-for="(item, index) in tabBars" :key="index">
          <view
            class="scroll-tab-item"
            :class="{ active: tabIndex == index }"
            @tap="toggleTab(index)"
          >
            {{ item.name }}
            <view class="scroll-tab-line"></view>
          </view>
        </block>
      </scroll-view>
    </view>
    <!-- 内容区 -->
    <view class="content">
      <!-- 滑块视图 -->
      <swiper
        :current="tabIndex"
        @change="tabChange"
        style="height: calc(100vh - 280rpx)"
      >
        <!-- current:当前所在滑块的index,1表示失物招领 -->
        <swiper-item key="1">
          <!-- swiper与scroll-view联动实现页面局部上下滑动 -->
          <scroll-view scroll-y="true" style="height: 100%">
            <!-- 瀑布流 -->
            <custom-waterfalls-flow
              :value="properties"
              @wapperClick="jumpDetails()"
              @imageClick="jumpDetails()"
            >
              <view
                class="item"
                v-for="(item, index) in properties"
                :key="index"
                slot="slot{{index}}"
              >
                <view v-if="item.lost === 0">
                  <view class="title">{{ item.propertyTitle }}</view>
                  <view class="desc">
                    <view class="name"> {{ item.creatorName }} </view>
                    <view class="tag"> &lt;{{ item.tagName }}&gt; </view>
                  </view>
                </view>
              </view>
            </custom-waterfalls-flow>
            <!-- 底部加载中 -->
            <view class="loading" v-if="loading == true" @tap="loadElse()"
              >点击加载数据..</view
            >
            <view class="loading" v-if="loading == false">—— 到底啦 ——</view>
          </scroll-view>
        </swiper-item>
        <!-- key="2"表示寻物启事 -->
        <swiper-item key="2">
          <!-- swiper与scroll-view联动实现页面局部上下滑动 -->
          <scroll-view scroll-y="true" style="height: 100%">
            <!-- 瀑布流 -->
            <custom-waterfalls-flow
              :value="properties"
              @wapperClick="jumpDetails()"
              @imageClick="jumpDetails()"
            >
              <view
                class="item"
                v-for="(item, index) in properties"
                :key="index"
                slot="slot{{index}}"
              >
                <view v-if="item.lost === 1">
                  <view class="title">{{ item.propertyTitle }}</view>
                  <view class="desc">
                    <view class="name"> {{ item.creatorName }} </view>
                    <view class="tag"> &lt;{{ item.tagName }}&gt; </view>
                  </view>
                </view>
              </view>
            </custom-waterfalls-flow>
            <!-- 底部加载中 -->
            <view class="loading" v-if="loading == true" @tap="loadElse()"
              >点击加载数据..</view
            >
            <view class="loading" v-if="loading == false">—— 到底啦 ——</view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { property } from "@/api/property.js";
export default {
  data() {
    return {
      tabIndex: 0 /* 选中标签栏的序列,默认显示第一个 */,
      tabBars: [
        {
          name: "失物招领",
          id: "lost",
        },
        {
          name: "寻物启事",
          id: "found",
        },
      ],
      listQuery: {
        lost: 0,
        propertyTitle: "",
        tagId: 0,
        current: 1,
        total: 0,
        size: 4,
      },
      properties: [],
      loading: true,
      data: {
        list: [
          {
            image: "https://tenapi.cn/acg",
            title: "我是标题1",
            desc: "描述描述描述描述描述描述描述描述1",
          },
          {
            image: "https://via.placeholder.com/200x200.png/2878ff",
            title: "我是标题2",
            desc: "描述描述描述描述描述描述描述描述2",
          },
        ],
      },
      tagContent: [
        { value: 1, text: "证件", selected: false },
        { value: 2, text: "服饰", selected: false },
        { value: 3, text: "数码", selected: false },
        { value: 4, text: "日用品", selected: false },
        { value: 5, text: "其他", selected: false },
      ],
    };
  },
  onLoad() {
    this.getProperty();
  },
  methods: {
    //切换选项卡
    toggleTab(index) {
      this.tabIndex = index;
    },
    //滑动切换swiper
    tabChange(e) {
      this.tabIndex = e.detail.current;
      this.listQuery.lost = e.detail.current;
      this.properties = [];
      this.getProperty();
    },
    /**
     * 获取商品
     */
    getProperty() {
      property(this.listQuery).then((res) => {
        if (res.data) {
          this.properties = this.properties.concat(res.data.records);
          console.log(res.data);
          this.listQuery.total = parseInt(res.data.total);
          // 判断是否还有剩余的数据
          if (
            this.listQuery.total >
            this.listQuery.current * this.listQuery.size
          ) {
            this.loading = true;
          } else {
            this.loading = false;
          }
        }
      });
    },
    // 跳转到详情页面
    jumpDetails(e) {
      uni.navigateTo({
        url: "/pages/property/index?propertyId=1562591718235242498",
      });
    },
    search() {
      this.properties = [];
      this.getProperty();
    },
    changeTag(tag) {
      if (this.listQuery.tagId == tag.value) {
        this.tagContent.forEach((item) => {
          item.selected = false;
        });
        this.listQuery.tagId = "";
        this.properties = [];
        this.getProperty();
      } else {
        this.listQuery.tagId = tag.value;
        // 排他算法实现单选效果
        this.tagContent.forEach((item) => {
          item.selected = false;
        });
        tag.selected = !tag.selected;
        this.properties = [];
        this.getProperty();
      }
    },
    loadElse() {
      this.listQuery.current++;
      this.getProperty();
    },
  },
};
</script>

<style lang="scss">
.bg-color {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: -1;
}
.search-bar {
  margin: 20rpx 40rpx 0 40rpx;
  .search-icon {
    width: 40rpx;
    height: 40rpx;
  }
}
.tag-body {
  margin: 0 40rpx;
  display: flex;
  justify-content: space-evenly;
}
.horizonal-tab {
  font-size: 34rpx;
  margin: 10rpx 0 20rpx 20rpx;
  .scroll-tab {
    white-space: nowrap; /* 必要，导航栏才能横向*/
    border-bottom: 1rpx solid #eee;
  }
  .scroll-tab-item {
    display: inline-block; /* 必要，导航栏才能横向*/
    margin: 20rpx 30rpx 0 30rpx;
  }
  .active {
    color: #000;
    font-size: 36rpx;
    .scroll-tab-line {
      border-top: 10rpx solid #ffcf3f;
      border-radius: 20rpx;
      width: 80rpx;
    }
  }
}
.content {
  margin: 0 40rpx;
  custom-waterfalls-flow {
    image {
      display: none;
    }
  }
  .title {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .desc {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .name {
      max-width: 230rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .tag {
      font-size: 20rpx;
    }
  }
}
</style>
